<template>
    <el-dialog
      v-model="createVisible"
      :title="operation == 'create' ? '添加地址' : '编辑编辑'"
      @before-ok="createOk"
      @close="close(createRef)"
      width="600px"
      top="100px"
    >
      <div style="width: 500px">
        <el-form
          :model="createForm"
          ref="createRef"
          :rules="createRules"
          label-width="130px"
          size="default"
          v-loading="initLoading"
        >
          <el-form-item label="联系人姓名：" prop="name">
            <el-input
              v-model="createForm.name"
              placeholder="请输入联系人姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话：" prop="phone">
            <el-input
              v-model="createForm.phone"
              placeholder="请输入联系电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="详细地址：" prop="detail">
            <el-input
              v-model="createForm.detail"
              placeholder="请输入详细地址"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="flex center">
          <el-button @click="close(createRef)">取消</el-button>
          <el-button
            type="primary"
            :loading="btnLoading"
            :disabled="btnLoading"
            @click="createOk(createRef)"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </template>
    
    <script lang="ts">
  export default {
    name: "storeRefundAddressCreate",
  };
  </script>
    <script lang="ts" setup>
  import { ref, getCurrentInstance, nextTick, reactive } from "vue";
  import type { FormInstance } from "element-plus";
  import {
    createRefundAddress,
    updateRefundAddress,
    getRefundAddressDetail,
  } from "@/api/store/refund_address";
  import type { Result, ResultError } from "@/types";
  
  const {
    proxy: { $message, $utils },
  } = getCurrentInstance() as any;
  
  const emit = defineEmits(["success"]);
  
  const createVisible = ref<boolean>(false);
  
  const operation = ref<string>("create");
  
  const operationId = ref<number>(0);
  
  const createRef = ref<typeof FormInstance>();
  
  const btnLoading = ref<boolean>(false);
  
  const parentTree = ref<any>([]);
  
  const initLoading = ref<boolean>(true);
  
  const toInit = () => {
    if (!operationId.value) {
      initLoading.value = false;
      return;
    }
    getRefundAddressDetail({ id: operationId.value })
      .then((res: Result) => {
        createForm.value.name = res.data.name;
        createForm.value.phone = res.data.phone;
        createForm.value.detail = res.data.detail;
        initLoading.value = false;
      })
      .catch((err: ResultError) => {
        $utils.errorMsg(err);
      });
  };
  
  const createForm = ref({
    name: "",
    phone: "",
    detail: "",
  });
  const createRules: any = reactive({
    name: [{ required: true, message: "联系人姓名不能为空！" }],
    phone: [{ required: true, message: "联系电话不能为空！" }],
    detail: [{ required: true, message: "地址不能为空！" }],
  });
  
  const createOk = async (formEl: typeof FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid: any, fields: any) => {
      if (valid) {
        if (btnLoading.value) {
          return;
        }
        btnLoading.value = true;
        let operationApi: any = null;
        if (operation.value == "create") {
          operationApi = createRefundAddress(createForm.value);
        } else {
          operationApi = updateRefundAddress(
            Object.assign(
              {
                id: operationId.value,
              },
              createForm.value
            )
          );
        }
        operationApi
          .then((res: Result) => {
            $message.success(res.message);
            close(formEl);
            emit("success");
            btnLoading.value = false;
          })
          .catch((err: ResultError) => {
            $utils.errorMsg(err);
            btnLoading.value = false;
          });
      }
    });
  };
  
  const open = (id: number = 0) => {
    initLoading.value = true;
    if (id != 0) {
      operation.value = "update";
      operationId.value = id;
    } else {
      operation.value = "create";
    }
    nextTick(() => {
      toInit();
    });
    createVisible.value = true;
  };
  
  const close = async (formEl: typeof FormInstance | undefined) => {
    if (formEl) {
      formEl.resetFields();
    }
    operationId.value = 0;
    createVisible.value = false;
  };
  
  defineExpose({ open });
  </script>